<template>
        <div class="box">
            <el-form :model="registerForm" :rules="rules" ref="registerForm" label-width="80px">
                <div class="form-title">注册账户</div>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="registerForm.password" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="registerForm.confirmPassword" type="password" placeholder="请输入确认密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" @click="register" type="primary">{{ loadingText }}</el-button>
                    <el-button @click="goToLoginPage" type="text">已有账号？去登录</el-button>
                </el-form-item>
            </el-form>
        </div>
  </template>
  
<script>

import { registerUser } from "../../src/api/user"

  export default {
    name: 'RegisterView',
    data() {
      return {
        registerForm: {
          username: '',
          passwd: '',
          confirmPassword: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 15, message: '用户名长度在 3 到 15 个字符之间', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度在 6 到 20 个字符之间', trigger: 'blur' }
          ],
          confirmPassword: [
            { required: true, message: '请确认密码', trigger: 'blur' },
            { validator: this.validateConfirmPassword, trigger: 'blur' }
          ]
        },
        loading: false,
        loadingText: '注册'
      };
    },
    methods: {
      register() {
        this.$refs['registerForm'].validate((valid) => {
          if (valid) {
            // 模拟注册请求
            
            registerUser(this.registerForm).then((response) => {
              if (response.data.code === 200) {
                this.loading = false;
                this.loadingText = '注册成功';
                this.$router.push('/loginout'); // 注册成功后跳转到登录页面
                this.$alert('注册成功！', { confirmButtonText: '确定' });
              }
            })

            // this.loading = true;
            // this.loadingText = '正在注册...';
  
            // setTimeout(() => {
              
            // }, 2000);
          } else {
            this.$alert('表单验证失败', { confirmButtonText: '确定' });
          }
        });
      },
      validateConfirmPassword(rule, value, callback) {
        if (value !== this.registerForm.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      goToLoginPage() {
        this.$router.push('loginout'); // 跳转到登录页面
      }
    }
  };
</script>
  
<style scoped>
html, body {
  height: 100%;
  margin: 0;
}
.form-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}
.box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('../assets/beijing1.png');
    background-size: cover;
    background-position: center;
}
.el-form {
  width: 400px;
  padding: 30px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8); 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  width: 100%;
}
</style>